<template>
  <div>
    <div ref="commonEchatRef" :style="{ height: height, width: width }"></div>
  </div>
</template>
<script setup lang="ts">
/**
这个文件对echarts进行了封装，可以简化页面中引入的步骤
难点：
1.props传值的方式有点奇怪，新的定义props的方式
  1.1 这个是最新的语法传值格式
  1.2 参考文献https://blog.csdn.net/lijiahui_/article/details/122725791
2.watchEffect的使用，新的监听器的使用
  2.1一种新的监听器的使用方式，跟watch有一定的去别
  2.2参考文献1：https://blog.csdn.net/lannieZ/article/details/110868683?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_paycolumn_v3&utm_relevant_index=2
  2.3参考文献2：https://blog.csdn.net/qq_26834399/article/details/121540652?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_default&utm_relevant_index=1
 */

import { ref, reactive, onMounted, watchEffect } from 'vue'
/**
 * 引入了对于echarts的hooks的使用，里面封装了两个步骤
 * 第一个是创建echart的实例
 * 第二个就是设置options
 * 第三个就是监听窗口的变化
 * 这些事件在onMounted函数中才解构出来
 * 并没有一开始就解构出来
 */
import useEcharts from '@/hooks/useEcharts'
// echarts的ref属性
const commonEchatRef = ref<HTMLElement>()
// 接收父组件传递过来的值
// 如果只是用definprops,也可以实现，但是不能限制是否必传
const props = withDefaults(
  // 第一个参数是添加类型声明，这个可以更为灵活，可以规定props是否必传
  defineProps<{ width?: string; height: string; options: any }>(),
  // 第二个参数就是传入的默认值
  { width: '100%', height: '360px' }
)
// 使用下面这种方法也是可以的，而且比较简单
// const props = defineProps({
//   width: {
//     type: String,
//     efault: '100%'
//   },
//   height: {
//     type: String,
//     efault: '360px'
//   },
//   options: {
//     type: Object,
//     default: () => {
//       return {}
//     }
//   }
// })
onMounted(() => {
  const { setOptions, resize } = useEcharts(commonEchatRef.value!)
  // 也是监听器的一种，他不用传入监听的数据，直接监听一个回调函数内涉及到的响应式数据
  // 这个只能是回调函数的相关数据发生改变，监听器才起作用
  // watch则需要传入依赖，而且可以传入多个，传入依赖之后就可以触发回调函数
  watchEffect(() => {
    setOptions(props.options)
  })
  window.addEventListener('resize', () => {
    resize()
  })
})
</script>
<style scoped lang="scss"></style>
